window.addEventListener('load', function () {
    // 轮播图框架搭建
    // 1.显示隐藏模块
    var facus = this.document.querySelector('.fause');
    var arrow_l = this.document.querySelector('.arrow-l');
    var arrow_r = this.document.querySelector('.arrow-r');
    // 1-1鼠标经过就显示左右按钮
    facus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null;  // 清除定时器变量
    })
    // 1-2鼠标离开就隐藏左右按钮
    facus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function () {
            // 自动播放类似于手动点击按钮操作   自动点击事件
            arrow_r.click();
        }, 2000);

    })
    // 2.动态生成小圆圈 有几张图片就生成几个小圆圈
    var lis = facus.querySelectorAll('li');
    var circle = facus.querySelector('.circle');
    var ul = facus.querySelector('ul');
    for (var i = 0; i < lis.length; i++) {
        li = this.document.createElement('li');
        // 给添加的li追加索引号index
        li.setAttribute('index', i);
        circle.appendChild(li);
        // 3.添加li的同时给li设置排他思想
        li.addEventListener('click', function () {
            for (var i = 0; i < circle.children.length; i++) {
                circle.children[i].className = '';
            }
            this.className = 'current';
            // 4.点击小原点让图片切换  （小圆点的索引号*图片宽度）
            var index = this.getAttribute('index');
            // bug 1 让小圆圈的索引号和当前图片的位置建立联系
            num = index;
            circle1 = index;
            var step = -index * facus.offsetWidth;
            // animate(obj, target, callback);
            animate(ul, step);
        })
    }

    circle.children[0].className = 'current';
    // 5.给按钮添加点击事件--> 点击一次，让图片滚动一次
    // 5-1 克隆第一张图片
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 5-2  无缝滚动
    var num = 0;
    var circle1 = 0;  // 小圆圈当前的位置索引号
    var flag = true; // 节流阀-->相当于水龙头
    // 左侧按钮
    arrow_r.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;  // 点击一次让计数器的num++
            animate(ul, -num * facus.offsetWidth, function () {
                flag = true;
            });
            // 点击按钮时，小圆圈跟着动
            circle1++;
            if (circle1 == circle.children.length) {
                circle1 = 0;
            }
            circlechange();
        }
    })
    // 右侧按钮
    arrow_l.addEventListener('click', function () {
        if (flag) {
            flag = false;  // 首先将水龙头关闭
            if (num == 0) {
                ul.style.left = (ul.children.length - 1) * facus.offsetWidth;
                num = ul.children.length - 1;
            }
            num--;  // 点击一次让计数器的num--
            animate(ul, -num * facus.offsetWidth, function () {
                flag = true;  // 等待上一个函数动画结束 让水龙头打开
            });
            // 点击按钮时，小圆圈跟着动
            circle1--;
            if (circle1 < 0) {
                circle1 = circle.children.length - 1;
            }
            circlechange();
        }
    })
    function circlechange() {
        // 将小圆圈其他的类名清空，留下当前的类名
        for (var i = 0; i < circle.children.length; i++) {
            circle.children[i].className = '';
        }
        circle.children[circle1].className = 'current';
    }
    // 定时器模块的制作
    var timer = this.setInterval(function () {
        // 自动播放类似于手动点击按钮操作   自动点击事件
        arrow_r.click();
    }, 2000);
})